<template>
    <div class="home">
        <div class="box1">
            <dv-border-box-11 title="KGC数据可视化平台" :key="scoreConfig.key">
                <dv-scroll-board :config="scoreConfig"
                                 style="width:95%;height:58%;padding-left: 30px;padding-top: 55px"/>
            </dv-border-box-11>
        </div>
        <div class="box4">
            <h3>薪资TOP10</h3>
            <dv-border-box-8 >
                <dv-scroll-ranking-board  class="salary" :config="salaryConfig" style="width:90%;height:80%;"/>
            </dv-border-box-8>
        </div>
        <div class="box5">
            <h3>专业人数</h3>
            <dv-border-box-1 >
                <dv-active-ring-chart class="major" :config="courseConfig" style="width:90%;height:90%"/>
            </dv-border-box-1>
        </div>
        <div class="box6">
            <h3>就业人数</h3>
            <dv-border-box-8 :reverse="true">
                <dv-capsule-chart class="job" :config="jobTimeConfig" style="width:85%;height:80%"/>
            </dv-border-box-8>
        </div>
    </div>
</template>

<script>
    import {scoreListApi} from "@/api/score";
    import {studentMajorScreenDataApi} from "@/api/course";

    export default {
        name: 'HomeView',
        data() {
            return {
                key : 1,
                scoreConfig: {
                    header: ['学号', '姓名', '班级','考试内容', '成绩','日期'],
                    data: [ ],
                    headerBGC: '#000000',
                    evenRowBGC: '',
                    oddRowBGC: '',
                    align: ['center', 'center', 'center', 'center', 'center','center']
                },
                salaryConfig: {
                    data: [
                        {
                            name: '张三',
                            value: 8000
                        },
                        {
                            name: '李四',
                            value: 12000
                        },
                        {
                            name: '王五',
                            value: 7800
                        },
                        {
                            name: '赵六',
                            value: 7000
                        },
                        {
                            name: '钱七',
                            value: 8500
                        },
                        {
                            name: '张三',
                            value: 8000
                        },
                        {
                            name: '李四',
                            value: 12000
                        },
                        {
                            name: '王五',
                            value: 7800
                        }
                    ],
                    unit: '元'
                },
                jobTimeConfig: {
                    data: [
                        {
                            name: 'Java',
                            value: 300
                        },
                        {
                            name: 'Web',
                            value: 123
                        },
                        {
                            name: 'UI',
                            value: 98
                        },
                        {
                            name: '大数据',
                            value: 75
                        },
                    ],
                    colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
                    unit: '人',
                    showValue: true
                },
                courseConfig: {
                    activeRadius: '45%',
                    lineWidth: 10,
                    showOriginValue: true,
                    data: [ ],
                    digitalFlopStyle: {
                        fontSize: 20
                    }
                }
            }
        },
        methods:{

            async scoreList() {
               // [{},{},{}]   ->   [[],[],[]]    res.data  ->{code,msessage,data}
                let {data} = await scoreListApi()
                let datas =  data.map(dt=>{
                    return [dt.studentNo,dt.studentName,dt.clazz,dt.examContent,dt.score,dt.examTime]
                })
                // datas  [[examTime,studentName,clazz,score],[],[]]
                this.scoreConfig = {
                    header: ['学号', '姓名', '班级','考试内容', '成绩','日期'],
                    data: datas,
                    headerBGC: '#000000',
                    evenRowBGC: '',
                    oddRowBGC: '',
                    align: ['center', 'center', 'center', 'center','center','center']
                }
            },
            async courseList() {
                //  [{},{}]
                let {data} = await studentMajorScreenDataApi()
                console.log(JSON.stringify(data))
                this.courseConfig ={
                    activeRadius: '45%',
                    lineWidth: 10,
                    showOriginValue: true,
                    data: data,
                    digitalFlopStyle: {
                        fontSize: 20
                    }
                }
            }

        },
        created() {
            this.scoreList();
            this.courseList();
        }
    }
</script>

<style scoped>
    .home {
        width: 100%;
        height: 100%;
        /*background-color: #2b4b6b;*/
        /*设置网格布局*/
        display: grid;
        /*设置列数 第二个参数 每个盒子占用的份数*/
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr 1fr;
        gap: 10px;
    }

    .box1 {
        grid-column: span 3;
    }

    .box5, .box4, .box6 {
        position: relative;
    }

    .salary {
        position: absolute;
        top: 30px;
        left: 20px;
    }
    .major{
        position: absolute;
        top: 10px;
        left: 20px;
    }
    .job {
        position: absolute;
        top: 40px;
        left: 30px;
    }

    h3 {
        text-align: center;
        color: white;
        position: absolute;
        left: 50%;
        top: -15px;
        transform: translateX(-50%);
    }
</style>

